<template>
  <div style="background-color: #F3F3F3;padding-bottom: 50px;">
    <van-nav-bar
      title="教学统计"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs swipeable>
      <van-tab v-for="index in 8"
      :title="'标签 ' + index"
      color="#3E7EFF"
      line-width="35px" line-height="4px"
      title-active-color="#1D1D1D" title-inactive-color="#A1A1A1">
        <span class="content-title">
          中共上海市普陀区委党校、普陀区行政学院
          2021年1月-12月办班情况汇总表
        </span>
        <span class="content-subtitle">
          统计部门：办学科 统计时间：2021年1
        </span>
        <!-- <TchStaTable :gridColumns="gridColumns" :gridData="gridData" v-if="index!=2"></TchStaTable> -->
        <TchStaLockTable :gridColumns="gridColumns" :gridData="gridData"></TchStaLockTable>
      </van-tab>
    </van-tabs>
    <PageChangeControl class="page-control" preText="前一年" currText="今年" nextText="后一年"  @pre="pre()" @current="current()" @next="next()"></PageChangeControl>
  </div>
</template>

<script>
import PageChangeControl from './PageChangeControl.vue'
import TchStaTable from './TeachingStaTable.vue'
import TchStaLockTable from './TeachingStaLockTable.vue'
import moment from 'moment'
import { Dialog } from 'vant';

export default {
  created() {
    this.$data.role = this.$route.query.role;
  },
  data() {
    return {
      role:-1,
      currentPage:0,
      gridColumns: ["name", "power", "name1", "power1", "name2", "power2", "name3", "power3", "name4", "power4"],
      gridData: [
        { name: "主题班", power: 12, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "专题研讨组", power: 9000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "一般班次", power: 7000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity },
        { name: "研讨会", power: 8000, name1: "Chuck Norris", power1: Infinity, name2: "Chuck Norris", power2: Infinity, name3: "Chuck Norris", power3: Infinity, name4: "Chuck Norris", power4: Infinity }
      ],
      year: moment().year()
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({path:'/home',query:{role:this.$data.role}})
    },
    pre() {
      this.year = this.year - 1
      console.log(this.year)
    },
    current() {
      this.year = moment().year()
      console.log(this.year)
    },
    next() {
      this.year = this.year + 1
      if(this.year > moment().year()) {
        /// 超过今年的
        Dialog.alert({
          title: '提示',
          message: '查询年限超过限制',
        }).then(() => {
          // on close
        });
        return;
      }
      console.log(this.year)
    }
  },
  components:{
    PageChangeControl,
    TchStaTable,
    TchStaLockTable,
    Dialog
  }
}
</script>

<style>
  .van-tab__text {
    font-size: 12px;
  }
  .van-tab--active {
    font-size: 12px;
  }
  .van-tabs__wrap {
    border-bottom: 1px solid #E4E4E4;
  }
  .van-tabs__line {
    background-color: #3E7EFF;
    width: 35px;
    height: 4px;
    margin-bottom: 4px;
  }
  .content-title {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 24px;
    margin-bottom: 16px;
    display: block;
    font-size: 16px;
    font-weight: 500;
  }
  .content-subtitle {
    margin-left: 16px;
    margin-right: 16px;
    margin-bottom: 16px;
    display: block;
    font-size: 10px;
    font-weight: 200;
  }

  .page-control {
    left: 0;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>
